<template>
	<view class="estateList">
		<!-- 导航栏 -->
		<navBar class="s_navBar" isBack backColor="#000" background="#fff">
			<view class="s_nCenter" slot="center">
			<!-- 	<view class="s_nBg">
					<image :src="storeInfo.back_img"></image>
				</view> -->
				<view class="s_nInput">
					<view class="s_nIcon iconfont icon-search"></view>
					<input confirm-type="search" type="text" v-model="keyword" @confirm="searchData"
						placeholder="搜索您感兴趣的小区" placeholder-style=" #939393;" />
				</view>
			</view>
		</navBar>

		<!-- 轮播 -->
		<view class="swpierBox">
			<u-swiper :list="bannerList" mode="dot" duration="2000" :circular="true" indicator-pos="bottomCenter">
			</u-swiper>
		</view>
		<!-- 筛选 class="selectBox selectBoxB" -->
		<view :class="['selectBox',scrollheight >= 120?'selectBoxB':'']"
			:style="{top:scrollheight >= 120?navHeight -1 +'px':0,}">
			<!-- <HMfilterDropdown :menuTop="0" :filterData="filterData" updateMenuName :defaultSelected ="filterDropdownValue" @confirm="confirm"  dataFormat="Object"></HMfilterDropdown> -->
			<u-dropdown active-color="#A98F68" title-size="24" inactive-color="#333" menu-icon="arrow-down-fill"
				ref="uDropdown" menu-icon-size="14">
				<u-dropdown-item v-model="value1" :title="title" @change="compre_fn" :options="options1">
				</u-dropdown-item>

				<u-dropdown-item :title="area">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 500rpx;">
							<view class="u-text-center u-content-color u-p-20"
								:style="index==selectIndex?'background:#f1f1f1;':''"
								v-for="(item,index) in districtList" :key="index" @click="selectDistriFn(item,index)">
								{{item.city_name}}{{item.city_name == "全部"?'':'区'}}
							</view>
						</scroll-view>
						<button type="default" style="font: 600 30rpx/92rpx PingFang SC;color: #AE8C6C;" class="areaBtn"
							@click="closeDropdown">确定</button>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="value3" :title="houseYear" @change="houseAge_fn" :options="options3">
				</u-dropdown-item>
				<u-dropdown-item v-model="value4" :title="price" @change="price_fn" :options="options4">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 内容 -->
		<!-- 小区列表 -->
		<view class="estateAll">
			<view class="estateItem" v-for="(item,index) in estateList" :key="index" @click="toDetail(item.id)">
				<view class="estateImage">
					<image :src="item.thumb_url[0].path?item.thumb_url[0].path:`${baseImg}/static/login/logo.png`">
					</image>
				</view>
				<view class="estateView">
					<view class="estateTitle">
						<view class="estatenNav">
							<!-- <view class="estateNow">在售</view> -->
							<view class="estateTiT">{{item.name}}</view>
						</view>
						<view style="width: 31rpx;height: 31rpx;display: flex;align-items: center;"
							@tap.stop="getStarClick(item,index)">
							<u-icon :name="item.follow_status == 0?'star':'star-fill'"
								:color="item.follow_status == 0?'#CCCCCC':'#FFDE55'" size="34"></u-icon>
							<!-- star-fill -->
						</view>
					</view>
					<view class="estateMes">{{item.city}} | {{$utils.getFormatDate(item.build_time*1000,'yyyy')}}年建成 |
						{{item.start_area}}-{{item.end_area}}m²
					</view>
					<view class="estatePirce">¥{{item.area_price}}/m²</view>
					<view class="estateTips">
						<view class="estateTipsItem" v-for="(items,indexs) in item.house_tag" :key="indexs">
							{{items.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import service_oneN from '@/service/oneN.js'
	export default {
		components: {
			'HMfilterDropdown': HMfilterDropdown
		},
		data() {
			return {
				title: '综合',
				area: '区域',
				houseYear: '房龄',
				price: '价格',
				baseImg: 'http://manager.ryz1620.com',
				bannerList: [],
				options1: [{
						label: '综合',
						value: null,
					},
					{
						label: '评价数从高到低',
						value: 'comment_num',
					},
					{
						label: '在售数量从高到低',
						value: 'sale_num',
					}
				],
				districtList: [], //县区（区域选择列表）
				districtId: '',
				selectIndex: null,
				options3: [{
						label: '全部',
						value: null,
					},
					{
						label: '2年以内',
						value: '0,2',
					},
					{
						label: '2-5年',
						value: '2,5',
					},
					{
						label: '5-10年',
						value: '5,10',
					},
					{
						label: '10-15年',
						value: '10,15',
					},
					{
						label: '15-20年',
						value: '15,20',
					},
					{
						label: '20年以上',
						value: '20,70',
					}
				],
				options4: [{
						label: '综合',
						value: null,
					},
					{
						label: '价格从低到高',
						value: 'asc',
					},
					{
						label: '价格从高到低',
						value: 'desc',
					}
				],
				value1: '', //综合
				value2: '', //区域
				value3: '', //房龄
				value4: '', //价格

				indexArr: '',
				valueArr: '',
				filterDropdownValue: [],
				scrollHeight: 0,
				navHeight: 0,
				keyword: '', //关键字
				page: 1,
				pagesize: 10,
				estateList: [],
				tabsheight: '40',
				scrollheight: 0,
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			var that = this
			let info = that.$store.state.system.systemInfo
			that.navHeight = that.$store.state.system.navBarHeight
			// let winHeight = info.windowHeight * 2
			// that.scrollHeight = winHeight - (that.navHeight + 377)
			var obj = uni.createSelectorQuery();
			setTimeout(() => {
				that.windowHeight = uni.getSystemInfoSync()['windowHeight']; //屏幕高度
				obj.select('.selectBox')
					.boundingClientRect(function(rect) {
						//获取子元素高度
						// console.log(rect);
						that.tabsheight = rect.height == 0 ? 40 : rect.height
					})
					.exec();
			}, 200);
			// that.getEstateList()
			// that.getBanner()
			that.getCity()
			that.getDistrict()
		},
		onShow() {
			var that = this
			that.getEstateList('select')
			that.getBanner()
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			// console.log(scrollTop);
			this.scrollheight = scrollTop
		},
		onReachBottom() { //下拉加载更多
			this.page++;
			console.log(this.page);
			uni.showLoading({
				title: '加载中'
			})

			let params = {
				keyword: this.keyword,
				[`${this.value1}`]: this.value1 ? 'desc' : null, //key：comment_num评论数，sale_num在售数
				district_id: this.districtId,
				age: this.value3,
				area_price: this.value4,
				page: this.page,
				pagesize: this.pagesize
			}
			// console.log(params)
			service_oneN.getEstateList(params).then(res => {
				// console.log(res);
				if (res.code == 1) {
					this.estateList = this.estateList.concat(res.data)
				}
			})
			setTimeout(() => {
				uni.hideLoading()
				// this.getEstateList()

			}, 200)
		},
		methods: {
			// 获取城市
			getCity() {
				service_oneN.getCity({
					province_id: 450000
				}).then(res => {
					// console.log(res, '城市')
				})
			},
			// 获取县区
			getDistrict() {
				service_oneN.getDistrict({
					city_id: 450300
				}).then(res => {
					// console.log(res, '县区')
					if (res.code == 1) {
						var newArea = {
							city_name: '全部',
							cityid: null,
						}
						if (res.data.length > 0) {
							res.data.unshift(newArea)
						}
						// this.districtId = item.cityid
						// this.selectIndex = index
						this.districtList = res.data ? res.data : []
					}
				})
			},
			// 选择区域
			selectDistriFn(item, index) {
				// console.log(item, '选择县区')
				// this.area = item.city_name + '区'
				// 区域
				if (item.city_name == '全部') {
					this.area = '全部'
				} else {
					this.area = item.city_name + '区'
				}
				this.districtId = item.cityid
				this.selectIndex = index
			},
			// 选择区域确定
			closeDropdown() {
				this.area = this.area == '全部' ? '区域' : this.area
				this.getEstateList('select')
				this.$refs.uDropdown.close();
			},

			// 获取banner图
			getBanner() {
				service_oneN.getEstateBanner({
					type: '4'
				}).then(res => {
					// console.log(res, 'banner图')
					if (res.code == 1) {
						// this.bannerList = res.data ? res.data : []
						// var BannerArr =[]
						if (res.data) {
							res.data.forEach((item, index) => {
								item.image = item.img
								this.bannerList = [...this.bannerList, item]
							})
						}
					}
				})
			},
			// 获取小区列表
			getEstateList(select) {
				// this.page = select == 'select' ? 
				// console.log(select);
				if (select == 'select') {
					this.page = 1
					// console.log(this.page,select)
				}
				setTimeout(() => {
					let params = {
						keyword: this.keyword,
						[`${this.value1}`]: this.value1 ? 'desc' : null, //key：comment_num评论数，sale_num在售数
						district_id: this.districtId,
						age: this.value3,
						area_price: this.value4,
						page: this.page,
						pagesize: this.pagesize
					}
					// console.log(params)
					service_oneN.getEstateList(params).then(res => {
						// console.log(res);
						if (res.code == 1) {
							if (select == 'select') {
								this.estateList = res.data
							} else {
								this.estateList = res.data ? res.data : []
							}
							console.log(this.estateList);
						}
					})
				}, 200)

				// console.log(params)
			},
			// 小区关注 和取消关注
			getStarClick(row, index) {
				var that = this
				let params = {
					estate_id: row.id,
					status: row.follow_status == 0 ? 1 : 0,
				}
				console.log(params);
				if (row.follow_status == 0) {
					service_oneN.toFollow(params).then(res => {
						// console.log(res);
						if (res.code == 1) {
							console.log(res)
							uni.showToast({
								title: '关注成功',
								icon: 'success',
								duration: 2000
							})
							that.estateList[index].follow_status = params.status
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '是否取消关注该小区',
						success(res) {
							if (res.confirm) {
								service_oneN.toFollow(params).then(res => {
									// console.log(res);
									if (res.code == 1) {
										console.log(res)
										uni.showToast({
											title: '已取消关注',
											icon: 'success',
											duration: 2000
										})
										that.estateList[index].follow_status = params.status
									}
								})
							} else if (res.cancel) {

							}
						}
					})
				}

			},
			// 搜索小区
			searchData() {
				this.getEstateList('select')
			},
			// 综合1
			compre_fn(e) {
				// console.log(e)
				var that = this
				switch (e) {
					case null:
						that.title = '综合'
						break;
					case 'comment_num':
						that.title = '评价数从高...'
						break;
					case 'sale_num':
						that.title = '在售数量从高...'
						break;
						// default:
				}
				this.value2 = ''
				this.value3 = ''
				this.value4 = ''
				this.getEstateList('select')
			},
			// 区域2
			region_fn() {
				this.value1 = ''
				this.value3 = ''
				this.value4 = ''
				// this.getEstateList()
			},
			// 房龄3
			houseAge_fn(e) {
				var that = this
				// console.log(this.value3)
				// houseYear
				switch (e) {
					case null:
						that.houseYear = '全部'
						break;
					case '0,2':
						that.houseYear = '2年以内'
						break;
					case '2,5':
						that.houseYear = '2-5年'
						break;
					case '5,10':
						that.houseYear = '5-10年'
						break;
					case '10,15':
						that.houseYear = '10-15年'
						break;
					case '15,20':
						that.houseYear = '15-20年'
						break;
					case '20,70':
						that.houseYear = '20年以上'
						break;
						// default:
				}
				this.value1 = ''
				this.value2 = ''
				this.value4 = ''
				this.getEstateList('select')
			},
			// 价格4
			// {
			// 	label: '综合',
			// 	value: null,
			// },
			// {
			// 	label: '价格从低到高',
			// 	value: 'asc',
			// },
			// {
			// 	label: '价格从高到低',
			// 	value: 'desc',
			// }
			price_fn(e) {
				var that = this
				// console.log(e);
				switch (e) {
					case null:
						that.price = '综合'
						break;
					case 'asc':
						that.price = '价格从低到高'
						break;
					case 'desc':
						that.price = '价格从高到低'
						break;
						// default:
				}
				this.value1 = ''
				this.value2 = ''
				this.value3 = ''
				this.getEstateList('select')
			},

			// 进入详情
			toDetail(id) {
				uni.navigateTo({
					url: '/pages_onePlusN/pages/onePlusN/estateIndex?estate_id=' + id
				})
			},

			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.estateList {
		width: 100%;
		height: 100%;
		// background-color: #fff;

		// 导航栏
		.s_navBar {
			position: relative;
			z-index: 10;

			.s_nCenter {
				width: 100%;
			}

			.s_nBg {
				width: 100vw;
				background: #ccc;
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
				filter: blur(1px);
			}

			.s_nInput {
				color: #939393;
				width: 400rpx;
				height: 66rpx;
				padding: 0 64rpx;
				border-radius: 36rpx;
				background: #F6F7FB;
				position: relative;

				&>input {
					height: 100%;
					font-size: 24rpx;
				}
			}

			.s_nIcon {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 28rpx;
				position: absolute;
				top: 50%;
				left: 28rpx;
				margin-top: -14rpx;
			}
		}

		// 内容
		// .content {
		// padding: 40rpx 0rpx;
		// position: fixed;
		// padding-bottom: 200rpx;
		// left: 0;
		// width: 100%;
		.swpierBox {
			// width: 686rpx;
			// margin:0 auto;
			padding: 28rpx 32rpx;
			// height: 180rpx;
			border-radius: 8rpx;
			border-bottom: 8rpx solid #F4F4F4;
			// : 28rpx;
		}

		.selectBox {
			height: 80rpx;
			margin: 0rpx 0 0;
			background: #fff;
			border-bottom: 1px solid #fcfcfc;
			width: 100%;
			flex: 1;
			z-index: 1;

			.areaBtn {
				background-color: #f1f1f1;
			}

			.u-text-center .u-content-color .u-p-20 {
				padding: 20rpx 0 !important;
			}

			.u-text-center .u-content-color .u-p-20.active {
				background-color: #f1f1f1;
			}

			.HMfilterDropdown {
				height: 80rpx;
			}
		}

		.selectBoxB {
			position: fixed;
			// top: 100rpx;
		}

		//小区列表
		.estateAll {
			margin: 0rpx 32rpx;

			.estateItem {
				display: flex;
				align-items: flex-start;
				padding: 32rpx 0;
				border-bottom: 1px solid #F4F4F4;

				.estateImage {
					width: 278rpx;
					height: 188rpx;
					margin-right: 20rpx;
					border-radius: 4rpx;
					overflow: hidden;
				}

				.estateView {
					height: 188rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.estateTitle {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.estatenNav {
							display: flex;
							align-items: center;

							.estateNow {
								background: #C64843;
								font-size: 16rpx;
								color: #FFFFFF;
								padding: 4rpx 8rpx;
								width: max-content;
								border-radius: 4rpx;
								margin-right: 12rpx;
							}

							.estateTiT {
								font-size: 28rpx;
								font-weight: 600;
								color: #333333;
							}
						}
					}

					.estateMes {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						margin: 12rpx 0;
					}

					.estatePirce {
						font-size: 24rpx;
						font-weight: 400;
						color: #C64843;
						margin-bottom: 12rpx;
					}

					.estateTips {
						display: flex;
						align-items: center;

						.estateTipsItem {
							background: #F1F2F7;
							font-size: 16rpx;
							font-weight: 400;
							color: #C3AB7C;
							padding: 4rpx 8rpx;
							width: max-content;
							margin-right: 16rpx;
						}
					}
				}
			}
		}
	}
</style>
